<template>
	<view :style="{ 'paddingTop': (!checked ? '800rpx' : '600rpx') }">
		<view v-if="flag">
			<!-- 返回按钮 -->
			<!-- <view  class="back" style="line-height: 50rpx;background-color: aqua;width: 50rpx;height: 50rpx;border-radius: 50rpx;text-align: center;padding: auto;"> -->
			<image @click="goBack" class="back" src="@/static/zhibo/guanbi1.png" style="width: 65rpx;height: 65rpx;" />			
			<!-- </view> -->
	
			<!-- 翻转镜头按钮 -->
			<image @click="switchCamera" class="camera" src="@/static/broadcast/camera.png" />
			<!-- 表单 -->
			<view class="form">
				<view class="form-item  flex-center flex-space-between" v-if="!showModalStatus">
					<view class="cover" @click="chooseImage">
						<view class="relative" v-if="cover">
							<image class="cover-img radius" :src="cover" />
							<view class="cover-btn"><text class="text-white cover-btn-text fs-20">更换封面</text></view>
						</view>
						<view class="add-ico flex-center" v-else>
							<text class="text-white fs-70">+</text>
						</view>
					</view>
					<view class="value flex-1">
						<view class="input_name">
							<input v-model="name" placeholder-color="#ffffff" class="fs-26 text-white" :maxlength="10" placeholder="请输入直播间名称" />
						</view>
						<view class="">
							<picker @change="bindPickerChange" range-key="title" :value="typeIndex" :range="range">
								<view class="flex-center flex-space-between"><text class="fs-26 text-white">{{ typeIndex >=
									0 ?
									range[typeIndex].title : '请选择分类' }}</text>
									<image class="arrow-bottom" src="@/static/broadcast/arrow-bottom.png"
										mode="aspectFit">
									</image>
								</view>
							</picker>
						</view>
					</view>

				</view>
				<!-- <view class="form-item" v-if="!showModalStatus"> -->
			<!-- 		<view class="flex-center flex-space-between">
						<view class="label">
							<text class="text-white fs-26">是否播放录制视频</text>
						</view>
						<view class="value">
							<switch class="switch-checked" color="#4fb784" :checked="checked" @change="switch1Change" />
						</view>
					</view> -->

					<!-- <view class="cover" v-if="checked" @click="chooseVideo"> -->
						<!-- 暂且先放个 video，实际可能不需要 -->
					<!-- 	<view class="relative" v-if="video">
							<video class="add-ico radius" :src="video"></video>
							<view class="cover-btn"><text class="text-white cover-btn-text fs-20">更换封面</text></view>
						</view>
						<view class="add-ico flex-center" v-else>
							<text class="text-white fs-70">+</text>
						</view>
					</view>
				</view> -->
				<view class="btns flex-center" v-if="!showModalStatus">
					<view class="btn btn1" @click="clickme">
						<image class="beautiful-ico" src="@/static/broadcast/beautiful.png" />
						<view class="">
							<text class="text-white fs-26">{{ duration1 !== 0 || duration1 !== 1 || duration2 !== 1 || duration3 !== 1 || duration4 !== 1 ? '关闭' : '开启' }}</text>
							<text class="text-white fs-26">美颜</text>
						</view>
					</view>
					<view class="btn btn2 text-white" @click="createRoom">
						<text class="text-white fs-30">开启视频直播</text>
					</view>
				</view>
			</view>
			<!-- 填充物 -->
			<view class="filler" />
		</view>
		<view class="broadcast" v-if="!flag || flags">
			<!-- 顶部 -->
			<BroadcastTop @goBacks="goBack" @openManage="openManage" :live_data="live_data" :room_id="room_id" :avatarUrl="avatarUrl"
				@closeOperation="closeOperation" @openOperation="openOperation" @initPlayer='initPlayer' @yhjslm='yhjslm' @stopPlay="stopPlay"/>
			<!-- 弹幕部分 -->
			<Scrolling />
			<!-- 底部 -->
			<Operation v-if="Operation" @openLine="openLine" @openMore=openMore @switchCamera="switchCamera" />
			<!-- 语音连麦 -->
			<LineSettings :onLineSettings="onLineSettings" @closeLine="closeLine" :yuyinInfo='yuyinInfo' />
			<!-- 申请连麦 -->
			<Apply :onApply="onApply" @closeApply="closeApply" />
			<!-- 更多 -->
			<More :onMore="onMore" @openSendGifts=openSendGifts @closeMore="closeMore" @clickme="clickme"
				@switchCamera="switchCamera" />
			<!-- 打赏 -->
			<SendGifts :onSendGifts="onSendGifts" @closeSendGifts="closeSendGifts" :sendGifts_list="sendGifts_list" />
			<!-- 管理 -->
			<Manage :onManage="onManage" @closeManage="closeManage" :ThechosenOneInfo='ThechosenOneInfo' />
		</view>
		<!-- 调试美颜 -->
		<Beauty :showModalStatus="showModalStatus" @closeBeauty="closeBeauty" @durationChange0="durationChange0" @durationChange1="durationChange1"
			@durationChange2="durationChange2" @durationChange3="durationChange3" @durationChange4="durationChange4"
			:duration0="duration0" 		:duration1="duration1" :duration2="duration2" :duration3="duration3" :duration4="duration4" />
	</view>
</template>

<script>
	/**
	 * 创建直播间页
	 */
	import UniDataSelect from "@/uni_modules/uni-data-select"
	import SendGifts from "./sendgifts.vue"
	import Manage from "./manage.vue"
	import More from "./more.vue"
	import Apply from "./apply.vue"
	import LineSettings from "./lineSettings.vue"
	import Operation from "./operation.vue"
	import Scrolling from "./scrolling.vue"
	import BroadcastTop from "./broadcast-top.vue"
	import Beauty from "./beauty.vue"
	import {
		mapMutations
	} from "vuex"
	import webSocket from "@/webscoket/webSocket.js"
	export default {
		components: {
			UniDataSelect,
			SendGifts,
			Manage,
			More,
			Apply,
			LineSettings,
			Operation,
			Scrolling,
			BroadcastTop,
			Beauty
		},
		data() {
			return {
				room_id:'',
				checked: false, ///是否录播
				typeIndex: -1, //选择的索引
				name: "", ///名称
				cover: "", //封面
				video: "", //视频
				range: [],
				///
				animationData: {},
				showModalStatus: false,
				duration0: 1, ///设置美颜类型 0-9
				duration1: 1, ///设置美颜类型 0-9
				duration2: 1, ///设置美颜级别 0-9
				duration3: 1, ///设置美白级别 0-9
				duration4: 1, ///设置红润级别 0-9
				flag: true, ///控制显示页面
				flags:false,
				onLineSettings: false, ///控制语音连麦
				onMore: false, ///控制更多设置
				onSendGifts: false, ///控制打赏记录
				onManage: false, ///控制管理人员
				onApply: false,
				live_data: {},
				sendGifts_list: [],
				aaa: '',
				avatarUrl: '',
				Operation: true,
				ThechosenOneInfo: [], ///选中的人信息
				yuyinInfo: [],
			}
		},
		mounted() {
			this.sort();
			uni.$on('message', function(res) {
				var data = JSON.parse(res.data);
				console.log(data, 'websocketData')
			})

			var self = this
			setTimeout(function() {
				self.$store.state.liveNowType = true
			}, 30000)
		},
		methods: {
			...mapMutations(['updateLiveNowType']),
			createRoom() {
				this.cjBroadcast()
				//获取token
				// const value = uni.getStorageSync('autograph');
				// console.log(value);
			},
			initPlayer(data) {
				//开启互动
				this.$emit("initPlayer", data)
			},
			chooseImage() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: async (res) => {
						if (res.tempFilePaths.length > 0) {
							let data = await uni.$api.base.uploadFile({
								filePath: res.tempFilePaths[0]
							})
							this.cover = data.attachment_path
						}
					}
				});
			},
			/**
			 * 选取视频
			 * @param {Object} e
			 */
			chooseVideo() {
				uni.chooseVideo({
					sourceType: ['album'],
					compressed: false,
					success: (res) => {
						this.video = res.tempFilePath;
					}
				});
			},
			bindPickerChange: function(e) {
				this.typeIndex = e.detail.value
			},
			switch1Change: function(e) {

				this.checked = e.detail.value
				if (!this.checked) { ///清空视频地址
					this.video = ""
				}
			},

			switchCamera() {
				this.$emit("switchCamera")
			},

			goBack() {
				this.$emit("stopMicrophone")
				this.$emit("stopCamera")
				this.$emit('stopPush')
				uni.navigateBack()
			},
			bindClick(index) {
				this.list.splice(index, 1)
			},
			//点击显示美颜底部弹出框
			clickme() {
				this.openOperation()
				this.showModalStatus = true
			},
			closeBeauty() {
				this.closeOperation()
				this.showModalStatus = false
			},
			// //光滑
			// durationChange0(data) {
				
			// 	console.log(data)
			// 	this.duration0 = data
			// 	this.$emit("setBeautyGuangHuaStyle", data)
			// },
			//自然
			durationChange1(data) {
				this.duration1 = data
				this.$emit("setBeautyZiRanStyle", this.duration1)
			},
			// // 设置朦胧
			// durationChange2(data) {
			// 	this.duration2 = data
			// 	this.$emit("setBeautyMengLongStyle", this.duration2)
			// },
			// 设置美白等级
			durationChange3(data) {
				this.duration3 = data
				this.$emit("setWhitenessLevel", this.duration3)
			},
			// 设置红润等级
			durationChange4(data) {
				this.duration4 = data
				this.$emit("setRuddyLevel", this.duration4)
			},
			closeSendGifts() {
				this.onSendGifts = false
			},
			openSendGifts() {
				this.sendGifts2()
				this.onSendGifts = true
			},
			//关闭底部
			openOperation() {
				this.Operation = false
			},
			//打开底部
			closeOperation() {
				this.Operation = true
			},
			openManage(val) {
				this.ThechosenOneInfo = val
				this.onManage = true
				this.Operation = false
			},
			closeManage() {
				this.Operation = true
				this.onManage = false
			},
			closeMore() {
				this.Operation = true
				this.onMore = false
			},
			openMore() {
				this.Operation = false
				this.onMore = true
			},
			closeApply() {
				this.onApply = false
			},
			openApply() {
				this.onApply = true
			},
			closeLine() {
				this.onLineSettings = false
			},
			openLine() {
				this.audience()
				this.onLineSettings = true
			},
			//创建直播间
			async cjBroadcast() {
				if (this.name === '') {
					uni.showModal({
						content: "请填写完整信息！",
						showCancel: false
					});
				} else {
					this.flag = false
			
					let res = await uni.$api.user['cjBroadcast']({
						cate_id: Number(this.typeIndex) + 1,
						title: this.name,
						cover: this.cover,
						anchorInfo: JSON.stringify(uni.getStorageSync("userInfo"))
					})
				
					if (res) {
					
						this.room_id = res.id
						uni.setStorageSync('live_data', res);
				
						this.updateLiveNowType(true)	
				
						uni.setStorageSync('liveOpenData', res)
				
					}
				}
			},
			//分类
			async sort() {
				const res = await uni.$api.user['sort']()
				if (res) {
					this.range = res
					console.log(this.range, '分类'); // 打印响应数据
				}
			},
			
			//打赏
			async sendGifts2() {
				const res = await uni.$api.user['sendGifts2']({
					live_id: this.live_data.id,
				})
				if (res) {
					this.sendGifts_list = res
				}
			},
			//在线观众
			async audience() {
				const live_data = uni.getStorageSync("live_data")
				const res = await uni.$api.user['audience']({
					live_id: live_data.id,
					page: 0,
					limit: 200
				})
				if (res) {
					this.yuyinInfo = res
				}
			},
			yhjslm(newVal){
				console.log(newVal,'接受333')
				this.$emit("yhjslm",newVal)
			},
			stopPlay(){
				console.log('退出停止拉流111')
				this.$emit("stopPlay")
			}
		}
	}
</script>

<style lang="scss" scoped>
	.relative {
		position: relative;
	}

	.fs-70 {
		font-size: 70rpx;
	}

	.fs-30 {
		font-size: 30rpx;
	}

	.fs-26 {
		font-size: 26rpx;
	}

	.fs-20 {
		font-size: 20rpx;
	}

	.text-white {
		color: #fff;
	}

	.text-yellow {
		color: rgb(228, 187, 102);
	}

	.flex-center {
		flex-direction: row;
		align-items: center;
	}

	.flex-space-between {
		justify-content: space-between;
	}

	.flex-1 {
		flex: 1;
	}

	.camera {
		width: 76rpx;
		height: 76rpx;
		position: fixed;
		top: 100rpx;
		right: 30rpx;
	}

	.cover-btn {
		height: 44rpx;
		background-color: $uni-bg-color-mask;
		position: absolute;
		bottom: 0;
		width: 100%;
	}

	.cover-btn-text {
		line-height: 44rpx;
	}

	.cover-img {
		height: 200rpx;
		width: 150rpx;
	}

	.form-item {
		background-color: $uni-bg-color-mask;
		border-radius: $uni-border-radius-lg;
		padding: 20rpx;
		margin: 20rpx
	}

	.filler {
		height: 122rpx;
	}

	.back {
		width: 31rpx;
		height: 31rpx;
		position: fixed;
		top: 120rpx;
		left: 50rpx;
	}

	.value {
		padding-left: 30rpx;

	}

	.cover {
		height: 200rpx;
		width: 150rpx;
		border-radius: $uni-border-radius-lg;
		background-color: $uni-bg-color-mask;
		overflow: hidden;
	}

	.radius {
		border-radius: $uni-border-radius-lg;
	}

	.add-ico {
		height: 200rpx;
	}

	.arrow-bottom {
		width: 30rpx;
		height: 40rpx;
		margin-left: 10rpx;
	}

	.input_name {
		padding-bottom: 40rpx;
	}


	.btns {
		padding-top: 88rpx;
	}

	.btn {
		align-items: center;
		justify-content: center;
		padding: 30rpx;
	}

	.btn1 {
		font-size: 26rpx;
		display: flex;
		height: 100rpx;
		flex-direction: row;
		border-radius: 999rpx;
		margin-right: 24rpx;
		background: linear-gradient(to right, #fc686f, #fe924d);
	}

	.btn2 {
		height: 100rpx;
		border-radius: 999rpx;
		background: linear-gradient(to right, #4fb784, #a4d79f);
	}

	.beautiful-ico {
		width: 50rpx;
		height: 50rpx;
		margin-right: 6rpx;
	}

	.broadcast {
		height: 730rpx;
	}
</style>